<template>
  <div>
    <p>1. 获取所有图书信息</p>
    <button @click="getAllFn">点击-查看控制台</button>
    <p>2. 查询某本书籍信息</p>
    <label>
      <input type="text" placeholder="请输入要查询 的书名" v-model="bName"/>
    </label>
    <button @click="findFn">查询</button>
    <p>3. 新增图书信息</p>
    <div>
      <label>
        <input type="text" placeholder="书名" v-model="bookObj.bookname">
      </label>
    </div>
    <div>
      <label>
        <input type="text" placeholder="作者" v-model="bookObj.author">
      </label>
    </div>
    <div>
      <label>
        <input type="text" placeholder="出版社" v-model="bookObj.publisher">
      </label>
    </div>
    <button @click="sendFn">发布</button>
    <hr/>
    <input ref="myInp" type="text" placeholder="这是一个输入框" v-if="isShow">
    <button v-else @click="btn">点击我进行搜索</button>
    <hr/>
    <p>1. 获取原生DOM元素</p>
    <h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1>
    <p>2. 获取组件对象 - 可调用组件内一切</p>
    <PartThreePanel ref="de"></PartThreePanel>
    <p>3. vue更新DOM是异步的</p>
    <p ref="myP">{{ count }}</p>
    <button @click="btn1">点击count+1, 马上提取p标签内容</button>
  </div>
</template>

<script>
import PartThreePanel from "./PartThreePanel";
// 目标1: 获取所有图书信息
// 1. 下载axios
// 2. 引入axios
// 3. 发起axios请求
import axios from "axios";
// 4. 全局配置
axios.defaults.baseURL = "http://123.57.109.30:3006"
export default {
  name: "BasicApiFive",
  mounted() {
    console.log(document.getElementById("h")); // h1
    console.log(this.$refs.myH); // h1
    let demoObj = this.$refs.de;
    demoObj.fn()
  },
  components: {
    PartThreePanel
  },
  data() {
    return {
      count: 0,
      isShow: false,
      bName: "",
      bookObj: { // 参数名提前和后台的参数名对上-发送请求就不用再次对接了
        bookname: "",
        author: "",
        publisher: ""
      }
    }
  },
  methods: {
    btn1() {
      this.count++; // vue监测数据更新, 开启一个DOM更新队列(异步任务)
      // console.log(this.$refs.myP.innerHTML); // 0

      // 原因: Vue更新DOM异步
      // 解决: this.$nextTick()
      // 过程: DOM更新完会挨个触发$nextTick里的函数体
      this.$nextTick(() => {
        console.log(this.$refs.myP.innerHTML); // 1
      })
    },
    // 目标: 点按钮(消失) - 输入框出现并聚焦
    // 1. 获取到输入框
    // 2. 输入框调用事件方法focus()达到聚焦行为
    async btn() {
      this.isShow = true;
      // this.$refs.myInp.focus()
      // 原因: data变化更新DOM是异步的
      // 输入框还没有挂载到真实DOM上
      // 解决:
      // this.$nextTick(() => {
      //     this.$refs.myInp.focus()
      // })
      // 扩展: await取代回调函数
      // $nextTick()原地返回Promise对象
      await this.$nextTick()
      this.$refs.myInp.focus()
    },

    getAllFn() {
      axios({
        url: "/api/getbooks",
        method: "GET", // 默认就是GET方式请求, 可以省略不写
      }).then((res) => {
        console.log(res)
      })
      // axios()-原地得到Promise对象
    },
    findFn() {
      axios({
        url: "/api/getbooks",
        method: "GET",
        params: { // 都会axios最终拼接到url?后面
          bookname: this.bName
        }
      }).then(res => {
        console.log(res);
      })
    },
    sendFn() {
      axios({
        url: "/api/addbook",
        method: "POST",
        data: {
          appkey: "7250d3eb-18e1-41bc-8bb2-11483665535a",
          ...this.bookObj
          //等同于下面
          //    bookname: this.bookObj.bookname,
          //    author: this.bookObj.author,
          //    publisher: this.bookObj.publisher
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
